<template>
  <div id="basic-table-con">
    <g-banner :title="'普通列表'" :des="'最基础的搜索框加列表的页面，表格最右侧下拉框可以控制展示的字段'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">普通列表</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <div class="toolbar">
        <div class="g-search-simple pull-left">
          <el-input placeholder="请输入内容" v-model="search" class="g-input-width">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-popover placement="bottom" trigger="click" ref="queryPopover" @hide="queryMode = true" :offset="60">
            <div class="g-poper-form">
              <el-form label-width="100px">
                <div class="g-form-block-grid">
                  <el-form-item label="证书编号">
                    <el-input placeholder="请输入证书编号"></el-input>
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-select placeholder="请选择状态" style="width: 100%" v-model="advancedQuery.status">
                      <el-option :value="0" label="启用"></el-option>
                      <el-option :value="1" label="禁用"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="所属区域">
                    <el-input placeholder="请输入所属区域"></el-input>
                  </el-form-item>
                </div>
                <div class="g-form-block-grid">
                  <el-form-item label="企业负责人">
                    <el-input placeholder="请输入企业负责人"></el-input>
                  </el-form-item>
                  <el-form-item label="有效期至">
                    <el-date-picker type="date" placeholder="请输入有效期至" style="width: 40%;"></el-date-picker>
                    <span style="margin: 0 10px;">至</span>
                    <el-date-picker type="date" placeholder="请输入有效期至" style="width: 40%;"></el-date-picker>
                  </el-form-item>
                </div>
              </el-form>
              <div class="button-group">
                <el-button type="primary" @click="handleAdvancedQuery">查询</el-button>
                <el-button>重置</el-button>
              </div>
            </div>
            <el-button class="g-query-mode" slot="reference" type="text" v-if="queryMode" @click="queryMode = false">
              <i class="el-icon-caret-bottom"></i><span>更多查询</span>
            </el-button>
            <el-button class="g-query-mode" slot="reference" type="text" v-else @click="queryMode = true">
              <i class="el-icon-caret-top"></i><span>精简查询</span>
            </el-button>
          </el-popover>
        </div>
        <div class="pull-right">
          <el-button type="primary" @click="handleDialogShow">步骤新增</el-button>
          <el-button type="primary" @click="handleNew">新增</el-button>
        </div>
        <div class="clearfix"></div>
      </div>
      <el-table :data="cosumerData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center" v-if="columnVisible[0]"></el-table-column>
        <el-table-column label="消费者名称" header-align="center" width="220px" v-if="columnVisible[1]">
          <div slot-scope="scope" class="consumer-name">
            <img src="@/assets/img/icon-consumer.png">
            <el-button type="text" @click="handleDetail(scope.row)">{{scope.row.consumerName}}</el-button>
          </div>
        </el-table-column>
        <el-table-column label="消费者编码" prop="consumerNameCode" align="center" v-if="columnVisible[2]"></el-table-column>
        <el-table-column label="调用次数" prop="invoke" align="center" v-if="columnVisible[3]"></el-table-column>
        <el-table-column label="状态" header-align="center" width="100px" v-if="columnVisible[4]">
          <div slot-scope="scope">
            <div v-if="scope.row.status == 0">
              <div class="dot dot-green"></div>
              <span>已发布</span>
            </div>
            <div v-if="scope.row.status == 1">
              <div class="dot dot-orange"></div>
              <span>草稿</span>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="是否启用" align="center" v-if="columnVisible[5]">
          <div slot-scope="scope">
            <el-switch v-model="cosumerData[scope.$index].isEnable" @change="handleEnable(scope.row)"></el-switch>
          </div>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <div slot-scope="{row}" class="g-operation-column">
            <el-button type="text" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
            <el-button type="text">更多</el-button>
          </div>
        </el-table-column>
        <el-table-column width="50" align="right">
          <div slot="header" class="g-more-column">
            <el-dropdown trigger="click" :hide-on-click="false">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[0]">序号</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[1]">消费者名称</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[4]">状态</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[5, 10, 25]" background :page-size="pageSize" :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper" :hide-on-single-page="false" :total="total">
    </el-pagination>
    <div class="clearfix"></div>
    <!-- 下面两种方法都可以将对话框抽离出去。一般可以使用第一种(steps)，如果需要频繁使用父组件数据也可以使用第二种(consumer-handler) -->
    <!-- 步骤新增对话框 -->
    <steps ref="steps" />
    <!-- 新增修改对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="handlerDialogVisible" width="30%" :before-close="handleHandlerClose" class="g-dialog">
      <consumer-handler ref="consumerHandler" @load="load"></consumer-handler>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleHandlerClose">取消</el-button>
        <el-button @click="handleSubmit" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <!-- 详情对话框 -->
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="40%" 
      :before-close="handleDetailClose" class="g-dialog">
      <consumer-detail ref="consumerDetail" @close="handleDetailClose"></consumer-detail>
    </el-dialog>
  </div>
</template>
<script>
import { getNormalTableData } from '@/api/normal-table'
import { getScrollingCon } from '@/util/common'
import ConsumerHandler from './components/consumer-handler'
import ConsumerDetail from './components/consumer-detail'
import Steps from './components/steps'
export default {
  data() {
    return {
      search: '',
      advancedQuery: {
        status: null,
      },
      queryMode: true,

      // 【表格】
      columnVisible: [true, true, true, true, true, true],
      cosumerData: [],
      currentPage: 1,
      pageSize: 10,
      total: 100,

      // 【对话框】
      handlerDialogVisible: false,
      dialogTitle: '新增',

      // 【对话框】
      detailDialogVisible: false,
    }
  },
  created() {
    this.loadNormalTableData()
  },
  components: {
    ConsumerHandler, ConsumerDetail, Steps
  },
  methods: {
    getScrollingCon,
    loadNormalTableData() {
      getNormalTableData().then((result) => {
        this.cosumerData = result.data.list
      })
    },
    handleAdvancedQuery() {
      this.$refs.queryPopover.doClose()
      this.queryMode = true
    },
    handleDetail(consumerId) {

    },
    handleEnable(row) {

    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    },
    handleDialogShow() {
      this.$refs.steps.handleDialogShow()
    },
    // 点击新增按钮
    handleNew() {
      this.handlerDialogVisible = true
      this.dialogTitle = '新增'
      this.$nextTick(() => {
        this.$refs.consumerHandler.init('add')
      })
    },
    // 点击名称查看详情
    handleDetail(row) {
      this.detailDialogVisible = true
      this.$nextTick(() => {
        this.$refs.consumerDetail.load(row)
      })
    },
    // 删除
    handleDelete({consumerId}) {
      this.$confirm('即将删除一条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    // 点击修改按钮
    handleEdit(row) {
      this.handlerDialogVisible = true
      this.dialogTitle = '修改'
      this.$nextTick(() => {
        this.$refs.consumerHandler.init('edit', row)
      })
    },
    // 点击提交（新增或修改）按钮
    handleSubmit() {
      this.$refs.consumerHandler.handleSubmit()
    },
    // 关闭消费者对话框
    handleHandlerClose() {
      this.handlerDialogVisible = false
    },
    // 对话框内提交成功
    load() {
      this.loadNormalTableData()
      this.handleHandlerClose()
    },
    // 关闭详情对话框
    handleDetailClose() {
      this.detailDialogVisible = false
    },
  },
}
</script>